<template>
    <div class="createorder-submit">
        <div class="img">
            <van-icon
                :name="img"
                size="60" />
        </div>
        <div class="info">
            <div class="title">{{$st('wp_submitted')}}</div>
            <div class="order-info">
                <div>{{$st('wp_Order_Number')}}：{{ repairOrderId }}</div>
            </div>
        </div>
        <div class="button-group">
            <van-button
                class="create"
                round
                type="primary"
                @click="createOrder">{{$st('wp_Fill_in_another_copy')}}</van-button>
            <van-button
                class="detail"
                round
                type="primary"
                @click="gotoOrderInfo('maitenanceorderdetail', { repairId: repairOrderId})">{{$st('wp_check_the_details')}}</van-button>
        </div>
    </div>
</template>
<script>
import dispatchSucceedImg from '@/assets/icon_60_success.png';
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
export default {
    setup () {
        const img = ref(dispatchSucceedImg);
        const route = useRoute();
        const repairOrderId = ref(route.query.repairId);

        const router = useRouter();
        const createOrder = () => {
            router.push({ path: '/createrepairorder' });
        };
        const gotoOrderInfo = (page, params) => {
            router.push({
                replace: true,
                name: page,
                params
            });
        };
        return {
            img,
            repairOrderId,
            createOrder,
            gotoOrderInfo
        };
    }
};
</script>
<style lang="scss" scoped>
.createorder-submit{
    .img{
        margin: 45px auto 15px auto;
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    .info{
        text-align: center;
        .title{
            font-size: 15px;
            margin-bottom: 10px;
        }
        .order-info{
            font-size: 13px;
            color: rgba(0,0,0,0.60);
            div{
                margin-bottom: 5px;
            }
        }
    }
    .button-group{
        text-align: center;
        margin-top: 60px;
    }
    .create{
        width: 180px;
        height: 35px;
        margin: 0 auto 15px auto;
        display: block;
        font-size: 17px;
    }
    .detail{
        width: 180px;
        height: 35px;
        margin: 0 auto 15px auto;
        display: block;
        font-size: 17px;
        background: #ffffff;
        border: 1px solid #dddddd;
        border-radius: 35px;
        font-size: 17px;
        font-weight: Normal;
        color: #000000;
    }
}
</style>
